<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/Style1.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="${pageContext.request.contextPath}/js/public.js"></script>


<!-- 引入bootstrap使用 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入css 相对、绝对、相对绝对路径 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<!-- js - jQuery、bootstrap -->
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
</HEAD>
<body>
	<br>
		<table cellSpacing="1" cellPadding="0" width="100%" align="center"
			bgColor="#f5fafe" border="0">
			<TBODY>
				<tr>
					<td class="ta_01" align="center" bgColor="#afd1f3"><strong>文章列表</strong>
					</TD>
				</tr>
				<tr>
					<td class="ta_01" align="center" bgColor="#f5fafe">
						<table cellspacing="0" cellpadding="1" rules="all"
							bordercolor="gray" border="1" id="DataGrid1"
							style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
							<tr
								style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

								<td align="center" width="10%">文章Id</td>
								<td align="center" width="10%">作者Id</td>
								<td align="center" width="10%">类别Id</td>
								<td align="center" width="20%">文章题目</td>
								<td width="7%" align="center">删除</td>
							</tr>
							<c:forEach var="article" items="${pageBean.list}">
								<tr onmouseover="this.style.backgroundColor = 'white'"
									onmouseout="this.style.backgroundColor = '#F5FAFE';">
								<!--文章Id-->
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="10%">${article.articleId}</td>
								<!-- 作者Id -->
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="10%">${article.userId}</td>
								<!-- 类别Id -->
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="10%">${article.categoryId}</td>
								<!-- 文章题目 -->
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="20%">${article.title}</td>
								<!-- 删除数据 -->
								<td align="center" style="HEIGHT: 22px">
									<a href="javaScript:void(0)" onclick='articleDelete("${article.articleId}")'> 
										<img src="${pageContext.request.contextPath}/images/i_del.png"
											width="16" height="16" border="0" style="CURSOR: hand">
									</a>
								</td>
							</tr>
							</c:forEach>
						</table>
					</td>
				</tr>

			</TBODY>
		</table>
		
		
	<div style="margin:auto; text-align: center;">
	<!-- items 			- 总条数
         maxPageItems   - 页面显示数
         maxIndexPages  - 页码标签最多显示数
         url 			- 访问的url
    -->
	<ul class="pagination" style="text-align: center; margin-top: 10px;">
		<pg:pager items="${requestScope.pageBean.total}"
				  export="currentPageNumber=pageNumber" maxPageItems="${requestScope.pageBean.pagerNum}"
				  maxIndexPages="10"
				  isOffset="true" url="${pageContext.request.contextPath}/article">
			<!-- pg:param传递url对应的参数数据 -->
			<pg:param name="method" value="list"/>
			
			
			<!-- 当前页面是第一面时，让privious失效 -->
			<c:if test="${currentPageNumber == 1}">
				<li class="disabled">
					<a href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
				</li>
			</c:if>
			<c:if test="${currentPageNumber != 1}">
				<li>
					<pg:prev>
						<a href="${pageUrl}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
					</pg:prev>
				</li>
			</c:if>
			
			
			<!-- 使点击当前页面失效 -->
			<pg:pages>
				<c:choose>
					<c:when test="${currentPageNumber eq pageNumber}">
						<li class="active"><a href="javascript:void(0);">${pageNumber}</a></li>
					</c:when>
					<c:otherwise>
						<li><a href="${pageUrl }">${pageNumber }</a></li>
					</c:otherwise>
				</c:choose>
			</pg:pages>
			
			<!-- 当前页面是最后一面时，让next失效 -->
			<c:choose>
				<c:when test="${currentPageNumber == requestScope.pageBean.pages}">
					<li class="disabled">
						<a href="javascript:void(0);" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
					</li>
				</c:when>
				<c:otherwise>
					<li>
						<pg:next>
							<a href="${pageUrl}"><span aria-hidden="true">&raquo;</span></a>
						</pg:next>
					</li>
				</c:otherwise>
			</c:choose>
		</pg:pager>
	</ul>
	
</div>
		
	<script type="text/javascript">
		function articleDelete(articleId) {
			var choose = confirm("确认删除?");
			if (choose) {
				window.location = "${pageContext.request.contextPath}/article?method=delete&articleId=" + articleId;
			}
		}
	</script>
</body>
</HTML>

